<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <div class="datatimes">
          <el-col :span="12" class="status">
            <span class="traing"></span>
            <span>{{times}}年度训练分期时间表</span>
            <span class="traing"></span>
          </el-col>
          <el-col :span="12" class="yealtime">
            <el-select
              v-model="queryParams.training_status_6"
              placeholder="年度选择"
              clearable
              size="small"
              style="width: 180px"
            >
              <el-option
                v-for="dict in statusIlls"
                :key="dict.name"
                :label="dict.name"
                :value="dict.name"
              />
            </el-select>
            <el-button type="primary" class="newill" @click="harderClick">
              <i class="el-icon-plus"></i>
              <span>制定周计划</span>
            </el-button>
          </el-col>
        </div>
      </el-row>
      <el-row v-for="(item,index) in createMainForm" :key="index" class="card-col">
        <el-col :span="3">
          <el-input v-model="item.firstSub"></el-input>
        </el-col>
        <el-col :span="2">
          <span class="picture">
            <img src="@/assets/image/icon.png" />
          </span>
        </el-col>
        <el-col :span="6">
          <div class="block">
            <el-date-picker
              v-model="item.secondsSub"
              @change="getimes(index)"
              format="yyyy 年 MM 月 dd 日"
                
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </el-col>
        <el-col :span="3" class="count-box">
          <span>
            <img src="@/assets/image/inscon.png" />
          </span>
        </el-col>
        <el-col :span="3">
          <el-input v-model="item.secondnumber"></el-input>
        </el-col>
        <el-col :span="3" class="picture">
          <span class="picture-image">
            <img src="@/assets/image/icon.png" />
          </span>
        </el-col>
        <el-col :span="3">
          <el-input v-model="item.courseNumber"></el-input>
        </el-col>
        <span
          v-if="index == 0"
          @click="handerAdd('beforeMorn')"
          class="el-icon-circle-plus-outline main-icon"
        ></span>
        <span
          v-if="index != 0"
          @click="handerDelete('beforeMorn', index)"
          class="el-icon-remove-outline main-icon"
        ></span>
      </el-row>
    </el-card>
    <el-card class="muget">
      <el-row class="shihaifeng">
        <el-col :span="24" class="status">
          <span class="traing"></span>
          <span>设置训练项目指标</span>
          <span class="traing"></span>
        </el-col>
      </el-row>
      <el-tabs type="border-card">
        <el-tab-pane label="水上专项训练">
          <el-form :inline="true" ref="IdealForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="训练课总时长:" label-width="128px">
                  <el-input type="input" v-model="formtable.classHour" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="训练总公里数:" label-width="125px">
                  <el-input type="input" v-model="formtable.kilometers" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总公里数:" label-width="129px">
                  <el-input type="input" v-model="formtable.mankilometer" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总公里数:" label-width="130px">
                  <el-input type="input" v-model="formtable.womankilometer" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.manTime" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.womanTime" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="陆上专项训练">
          <el-form :inline="true" ref="IdealForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="训练课总时长:" label-width="128px">
                  <el-input type="input" v-model="formtable.anteflexionIdeal" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="训练总公里数:" label-width="125px">
                  <el-input type="input" v-model="formtable.run30m" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总公里数:" label-width="129px">
                  <el-input type="input" v-model="formtable.run30mIdeal" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总公里数:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="陆上力量训练">
          <el-form :inline="true" ref="IdealForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="训练课总时长:" label-width="128px">
                  <el-input type="input" v-model="formtable.anteflexionIdeal" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="训练总公里数:" label-width="125px">
                  <el-input type="input" v-model="formtable.run30m" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总公里数:" label-width="129px">
                  <el-input type="input" v-model="formtable.run30mIdeal" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总公里数:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="陆上有氧训练">
          <el-form :inline="true" ref="IdealForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="训练课总时长:" label-width="128px">
                  <el-input type="input" v-model="formtable.anteflexionIdeal" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="训练总公里数:" label-width="125px">
                  <el-input type="input" v-model="formtable.run30m" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总公里数:" label-width="129px">
                  <el-input type="input" v-model="formtable.run30mIdeal" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总公里数:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="再生训练">
          <el-form :inline="true" ref="IdealForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="训练课总时长:" label-width="128px">
                  <el-input type="input" v-model="formtable.anteflexionIdeal" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="训练总公里数:" label-width="125px">
                  <el-input type="input" v-model="formtable.run30m" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总公里数:" label-width="129px">
                  <el-input type="input" v-model="formtable.run30mIdeal" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总公里数:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="伤病治">
          <el-form :inline="true" ref="IdealForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="训练课总时长:" label-width="128px">
                  <el-input type="input" v-model="formtable.anteflexionIdeal" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="训练总公里数:" label-width="125px">
                  <el-input type="input" v-model="formtable.run30m" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总公里数:" label-width="129px">
                  <el-input type="input" v-model="formtable.run30mIdeal" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总公里数:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="身体准备训练">
          <el-form :inline="true" ref="IdealForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="训练课总时长:" label-width="128px">
                  <el-input type="input" v-model="formtable.anteflexionIdeal" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="训练总公里数:" label-width="125px">
                  <el-input type="input" v-model="formtable.run30m" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总公里数:" label-width="129px">
                  <el-input type="input" v-model="formtable.run30mIdeal" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总公里数:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（公里）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="男子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="女子训练总时长:" label-width="130px">
                  <el-input type="input" v-model="formtable.run3000m" placeholder="（小时）"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-row style="text-align: center;margin-top:20px;">
      <el-button type="primary" class="button1" @click="submitForm('edit')">修改</el-button>
      <el-button type="primary" class="button2" @click="submitForm('add')">保存</el-button>
    </el-row>
  </div>
</template>

<script>
// import moment from "moment";
import {mapState} from "vuex";
import {
  datatime,
  selectime,
  selecterter,
  selecterteredit,
  selectlist,
  addyeal,
} from "@/api/monitor/logininfor";
export default {
  computed:{
    ...mapState({
      list:state=>state.list,///list不能和页面data里面定义的重名,  this.list就是调用list数据   保存list数据方法  this.$store.commit("SET_LIST",保存的)
    })
  },
  data() {
    return {
      statusIlls: [],
      first_levelIlls:[],
      binList:[],
      createMainForm: [
        {
          firstSub: "",
          secondsSub: "",
          courseNumber: "",
          secondnumber: "",
        },
      ],
      input: "",
      details: [],
      formtable: {
        classHour:'',
        kilometers:'',
        mankilometer:'',
        womankilometer:'',
        manTime:'',
        womanTime:'',
      },
      value: "",
      queryParams: {
        training_status_6: "",
      },
      times: [],
    };
  },
  created() {
    this.gettime();
    selectlist().then((res) => {
       
    });
    // this.GetListing("first_level").then((res) => {
    //     
    //   });
  },
  methods: {
    gettime() {
      datatime().then((response) => {
        if (response.data.lenth != 0) {
          this.times = response.data[0].naturalYearName;
        }
      });
      selectime().then((response) => {
        this.statusIlls = response.data;
      });
    },
    handerAdd(value) {
      if (value == "beforeMorn") {
        this.createMainForm.push({
          firstSub: "",
          secondsSub: "",
          courseNumber: "",
          secondnumber: "",
        });
    addyeal(this.createMainForm).then((res)=>{
      
    }).catch((res)=>{
        
    })      
      
      }
    },
    handerDelete(value, index) {
      this.createMainForm.splice(index, 1);
    },
    getimes(index) {
      var startDate = this.createMainForm[index].secondsSub[0];
      var timestamp = new Date(startDate);
      var start = timestamp.getTime();
      var endDate = this.createMainForm[index].secondsSub[1];
      var endtime = new Date(endDate);
      var end = endtime.getTime();     
      var iDays = Math.ceil(Math.abs(end - start+86400000) / 1000 / 60 / 60 / 24);   
      // var weekday = Math.floor(iDays / 7);
      var weginday=end+86400000; 
      this.createMainForm[index].secondnumber = iDays;
      this.calcWeek(this.createMainForm[index].secondsSub, index);
      
    },
    calcWeek(data, index) {
      // 选择的日期大于7天的
      // this.value1 就是日期v-mode 中的 
      let remainDay = 0; // 剩余的天数，
      let weekCount = 0; // 总共多少周

      if (data) {
        // day是计算两个日期相差多少天
        let day =
          (new Date(data[1]).getTime() - new Date(data[0]).getTime()) /
          (24 * 60 * 60 * 1000);
        // 计算出开始的日期是星期几，如果是周一的话，就把总共的天数 减去 6， 因为日历中，一行是7天，如果是星期二，那就减去5
        // 如果是星期三，那就减去4， 如果是星期四，那就减去3，如果是星期五，那就减去2，如果是星期六，那就减去1， 如果是星期日，那就减去0（在日期中 ，获取的日期如果是星期天的话，那么是0，星期一是1，星期二是2，依次下去）

        let week = data[0].getDay();
        if (day > 7) {
          // 如果是周一的话
          if (week == 1) {
            remainDay = day - 6;
          }
          // 如果是周二的话
          if (week == 2) {
            remainDay = day - 5;
          }
          // 如果是周三的话
          if (week == 3) {
            remainDay = day - 4;
          }
          // 如果是周四的话
          if (week == 4) {
            remainDay = day - 3;
          }
          // 如果是周五的话
          if (week == 5) {
            remainDay = day - 2;
          }
          // 如果是周六的话
          if (week == 6) {
            remainDay = day - 1;
            weekCount = Math.ceil(remainDay / 7) + 1;
          }
          if (week == 0) {
            remainDay = day - 0;
            weekCount = Math.ceil(remainDay / 7)+ 1;
          }
          if (week != 0) {
            weekCount = Math.ceil(remainDay / 7) + 1;
          }
         
        } else if (day <= 7) {
          weekCount = 1; // weekCount 就是多少周
        }
       
        this.createMainForm[index].courseNumber = weekCount;
      }
    },
    // 发送增加和修改
    submitForm(flag) {
      if (flag === "edit") {
        selecterter(this.formtable).then((response) => {         
           
        });
      }else if (flag === "add"){
         selecterteredit().then((response)=>{
           
         })
      }
    },
    harderClick() {
      this.$router.push({ path: "/gen/Weekday" }); // 周计划    
    },
  },
};
</script>
<style scoped>
.traing {
  display: inline-block;
  width: 14px;
  height: 8px;
  background-color: #2583ff;
  margin-right: 7px;
  margin-left: 7px;
}
.status {
  text-align: left;
}
.image-icon {
  width: -0.5%;
}
.app-container .card-col{
  margin-top:20px;
}
</style>
<style>
.datatimes {
  margin-bottom: 75px;
}
.muget {
  margin-top: 20px;
}
.shihaifeng {
  padding-bottom: 20px;
}
.card-col .el-input--medium .el-input__inner {
  text-align: center;
}
.muget .el-input--medium .el-input__inner {
  text-align: right;
}
.button1 {
  margin-left: -63px;
}
.button2 {
  margin-left: 83px;
}
.el-button + .el-button {
  margin-left: 85px;
}
.picture img {
  width: 30px;
  margin-left: 30px;
}
.block {
  display: flex;
}

.count-box {
  text-align: center;
}
.main-icon {
  margin-left: 30px;
}
.yealtime {
  text-align: center;
}
.card-col .el-col {
  text-align: center;
}

</style>